<template>
  <div class="login">
    <el-container>
      <el-header class="el_header" style="height:80px">
        <!-- <span class="login_H1">Login 登录页</span> -->

      </el-header>
      <el-main>
        <div class="input_div">
          <div class="login_div" @mouseover="login_image($event,'1')" @mouseout="login_image($event,'2')">

          </div>
          <div class="input_Homes" ref="homes">
            <div class="login_loog">

            </div>
            <div class="input_home">
              请输入账户 : <el-input class="el_input1" placeholder="请输入账户" v-model="username" clearable></el-input>
            </div>
            <div class="input_home">
              请输入密码 : <el-input class="el_input2" placeholder="请输入密码" v-model="password" show-password @keyup.native="password_keyup"></el-input>
            </div>
            <div class="el_checkbox">
              <el-checkbox v-model="checked">记住账号</el-checkbox>
              <el-button type="text" @click="centerDialogVisible = true" style="margin-left: 50%;">点击添加用户</el-button>
            </div>
            <el-row style="text-align: center;">
              <el-button class="login_btn" @click="btn" type="primary" round>登录</el-button>
            </el-row>
          </div>

        </div>

      </el-main>
    </el-container>

    <el-dialog title="注册账号" :visible.sync="centerDialogVisible" width="30%" center>
      <span>
        <addUser :UserClick="userclick"></addUser>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import addUser from '.././components/addUser.vue'

export default {
  name: 'Login',
  components: { addUser },
  data() {
    return {
      checked: false, // 是否记住账户
      username: '', // 输入的账户
      password: '', // 输入的密码
      data: [],

      is_clici: 0,
      centerDialogVisible: false
      // account: 'admin',
      // password: '123456'
    }
  },
  methods: {
    btn() {
      if (this.username == '' && this.password == '') {
        this.$message('账号密码不允许为空')
      } else {
        axios({
          url: `http://localhost:3000/user?account=${this.username}`,
          method: 'GET'
        }).then(response => {
          this.data = response.data
          console.log(response.data == 0)
        })
        // 寻找有没有该账户并且判断
        setTimeout(() => {
          // console.log(1)
          if (this.data.length == 0) {
            this.$message.error('账户名错误')
            return
          }
          if (this.data[0].account == this.username && this.password == this.data[0].password) {
            // 判断是否勾选保存账号 and 重写登录时不勾选时清空上一次的账号
            if (this.checked) {
              localStorage.setItem('user_name', this.username)
            } else {
              if (localStorage.getItem('user_name') !== null) {
                localStorage.removeItem('user_name')
              }
            }
            if (this.username == 'admin') {
              window.localStorage.setItem('jurisdiction', '1')
            } else {
              window.localStorage.setItem('jurisdiction', '2')
            }
            window.localStorage.setItem('login_admin', 'true')
            window.localStorage.setItem('user_id', this.data[0].id)

            this.$message({
              showClose: true,
              message: '欢迎！',
              type: 'success'
            })
            this.$router.replace({
              path: '/home/welcome'
            })
          } else {
            this.$message.error('密码错误！！')
          }
        }, 500)
      }
    },
    userclick() {
      this.is_clici++
      if (this.is_clici >= 2) {
        this.$message({
          type: 'success',
          message: '注册成功!'
        })
        this.centerDialogVisible = false
        this.is_clici = 0
      }
    },
    login_image(event, value) {
      if (value == '1') {
        this.$refs.homes.style.transform = `scale(${1})`
        event.target.style.transform = `scale(${1.05})`
        event.target.style.zIndex = 1
      } else {
        this.$refs.homes.style.transform = `scale(${1.05})`
        event.target.style.transform = `scale(${1})`
        event.target.style.zIndex = 0
      }
    },
    password_keyup(e) {
      if (e.keyCode == 13) {
        if (this.username == '') {
          return this.$message({
            showClose: true,
            message: '账号不能为空',
            type: 'warning'
          })
        }
        if (this.password == '') {
          return this.$message({
            showClose: true,
            message: '密码不能为空',
            type: 'warning'
          })
        }
        this.btn()
      }
    }
  },
  created() {
    // 标识为true 才让跳转
    if (localStorage.getItem('login_admin') === 'true') {
      // console.log(localStorage.getItem('user_name') != null)  false
      this.$router.replace({
        path: '/home/welcome'
      })
    } else {
      // 获取上次用户保存的账号
      if (localStorage.getItem('user_name') != null) {
        this.username = localStorage.getItem('user_name')
        this.checked = true
      }
    }
  },
  mounted() {
    // console.log(this.$store.state.jurisdiction)
  }
}
</script>

<style lang="less" scoped>
* {
  caret-color: transparent;
}
.login {
  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
  .el_header {
    padding: 5px;
    height: 100px;
    text-align: center;
    // background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    // background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
  }
  .el-main {
    width: calc(100vw);
    height: calc(100vh - 80px);
    padding-top: 100px;
  }
  .login_H1 {
    font-size: 35px;
    // margin-left: 20px;
    font-weight: bold;
    line-height: 80px;
  }

  .input_div {
    position: relative;
    display: flex;
    justify-content: center;
    .login_div {
      display: inline-block;
      border-radius: 25px;
      transform: scale(1);
      // transform: scale(1);
      z-index: 0;
      width: 340px;
      height: 440px;
      padding: 10px;
      // background-color: #35ae70;
      background-image: url(.././assets/初音未来.jfif);
      background-repeat: no-repeat;
      background-size: cover;
      transition: 1s;
    }
    .input_Homes {
      width: 450px;
      text-align: center;
      // margin: 10px auto;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      background: #fff;
      border-radius: 20px;
      transition: 1s;

      // transform: scale(1.05);
      transform: scale(1.05);

      .login_loog {
        margin: 20px;
        font-size: 20px;
        width: 100px;
        height: 100px;
        background-image: url(.././assets/登录.png);
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0 auto;
      }
      .el_checkbox {
        text-align: left;
        margin-top: 20px;
        margin-left: 60px;
        width: 400px;
      }
      .input_home {
        text-align: center;
        margin: 0px auto;
        width: 400px;
        border: 1px #000;
        padding-top: 15px;
        .el_input1 {
          width: 240px;
          margin: 20px 0px;
        }
        .el_input2 {
          width: 240px;
        }
      }
      .login_btn {
        width: 200px;
        margin: 20px 0px;
      }
    }
  }
}
</style>